<template>
	<div style="background-color: #000;min-height: 100vh;">
		<div>
			<image src="/static/imgs/car.png" style="width: 100%;" mode="widthFix"></image>
		</div>
		<div
			style="text-align: center;margin: 0 auto;margin: 0.5em;border-radius: 0.5em;background-color: #fff;padding-bottom: 2em;margin-top: 0;">
			<div>
				<image :src="api.getUrl() + paramObj?.brPic" style="width: 5em;height: 5em;"></image>
			</div>
			<div>{{paramObj?.brBrand}}</div>
		</div>

		<div style="background-color: #fff;margin: 0 auto;margin: 0.5em;border-radius: 0.2em;padding: 0.5em;">
			<serchInput ref="inputControl" :datalist="toRaw(objs)" @returnMethods="InputMethods"></serchInput>
		</div>

		<div style="background-color: #fff;margin: 0 auto;margin: 0.5em;padding-bottom: 4.5em;">
			<template v-for="(item,index) in objs" :key="index">
				<div class="{{index % 2 === 0 ? 'even' : 'odd'}}" @click="toBaojia(item)"
					style="display: flex;justify-content: space-between;height: 4em;padding: 0.5em;box-sizing: border-box;">
					<div style="margin-top: 1.0em;">{{item.brModel}}</div>
					<div>
						<!-- <div style="width: 4em;text-align: center;background-color: #ccc;color: #fff;padding: 0.1em;box-sizing: border-box;">{{brId}}</div> -->
					</div>
				</div>
			</template>
		</div>
	</div>
	<CustomTabbar ref="customTabbar"></CustomTabbar>
</template>

<script setup>
	import CustomTabbar from '@/component/custom-tabbar.vue'

	import serchInput from '@/component/serchInput.vue'
	import api from '@/common/httprequest.js'
	import {
		onMounted,
		reactive,
		ref,
		toRaw
	} from 'vue';
	let paramObj = ref(null);
	let brId = ref(null);
	let objs = reactive([]);

	const loadData = () => {
		uni.showLoading({
			title: '数据处理中...'
		});
		api.request({
			method: "GET",
			url: "/app/brandModel/brandModel",
			params: {
				brId: brId.value
			},
		}).then(res => {
			uni.hideLoading();
			console.log('resaa', res);
			if (res.code == 200) {
				var list = res.data;
				for (var i = 0; i < list.length; i++) {
					objs.push(list[i]);
				}

			} else {
				uni.showToast({
					icon: 'none',
					duration: 2000,
					title: '数据查询失败！'
				})
			}

		});
	}
	let seriesData = reactive([]);
	const loadSeries = () => {
		console.log('brId.value', brId.value);
		api.request({
			method: "GET",
			url: "/app/series/list",
			params: {
				brId: brId.value
			},
		}).then(res => {
			console.log('resaabb', res);
			if (res.code == 200) {
				var list = res.data;
				console.log('seriesDataList', list);
				seriesData.push(...list)
			} else {
				uni.showToast({
					icon: 'none',
					duration: 2000,
					title: '数据查询失败！'
				})
			}

		});
	}

	let inputControl = ref(null);
	const InputMethods = (obj) => {
		inputControl.value.setInputTxt(obj.brModel);
		console.log('objssss', obj);
		toBaojia(obj);
	}


	const toBaojia = (obj) => {
		//console.log('selectCar', obj);
		let nextParamObj = Object.assign({
			"chexingId": obj.id,
			"chexing": obj.brModel
		}, paramObj.value);

		// console.log('seriesData', seriesData);
		// return;
		uni.redirectTo({
			url: '/offer/offer?carParams=' + JSON.stringify(nextParamObj) + '&seriesData=' +
				JSON.stringify(seriesData)
		})
	}

	onMounted(() => {
		const query = getCurrentPages().pop().options;
		if (query.obj) {
			paramObj.value = JSON.parse(query.obj)
			brId.value = paramObj.value.id;
		}
		//console.log('paramObj', paramObj);
		loadData();
		loadSeries();
	})
</script>

<style scoped>
	.even {
		background-color: #f0f0f0;
		/* 偶数行颜色 */
	}

	.odd {
		background-color: #ffffff;
		/* 奇数行颜色 */
	}
</style>